<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 字体大小50px，颜色绿色 */
        p[title|="name"]{
            font-size: 50px;
            color: green
        }
    </style>
</head>
<body>
    <p title="name-1 name2">王兵</p>
    <p title="name2">国文</p>
    <p title="name-3">郝刚</p>
</body>
</html>
<!-- 
    属性选择器的使用
        - E[attr]：只使用属性名，但没有确定任何属性值
            - E表示标签名称
            - []表示选择属性 固定用法
            - attr 属性

        - E[attr ="value"]：指定属性名，并指定了该属性的属性值
        - E[attr ~="value"]:指定的属性名,属性值有一个或者多个都可以被选中
        - E[attr ^="value"]:指定的属性名,属性值是以value开头的,任意一个字符都可以
        - E[attr $="value"]:指定的属性名,属性值是以value结束的,任意一个字符都可以
        - E[attr *="value"]:指定的属性名,属性值中的任意一个字符都可以
        - E[attr |="value"]:指定的属性名，属性值必须以value-xxx

        总结:属性选择器的用法
            - 比较麻烦，推荐使用class选择器
            - 要求:E[attr ="value"] js动态的去创建dom结构
 -->